iT邦幫忙

2021 iThome 鐵人賽

DAY 20
0
Modern Web

我的JavaScript日常系列 第 20

JavaScript Day 20. BOM 與 DOM

  • 分享至 

  • xImage
  •  

前端網頁三大要素:JavaScript、HTML、CSS,HTML 負責整體資料與架構,CSS 負責網頁樣式外觀的呈現,JavaScript 處理使用者行為與互動,而這些互動其實都是由瀏覽器提供,主要提供的方法則分為兩種「BOM」及「DOM」。

JavaScript 由三部分構成:

  • JavaScript 核心 ( 以 ECMAScript 標準為基礎 )
  • BOM ( Browser Object Model,瀏覽器物件模型 )
  • DOM ( Document Object Model,文件物件模型 )

大家熟悉的 API,就是透過 JavaScript 去呼叫 BOM 與 DON,讓使用者得以與瀏覽器做互動。

BOM

究竟,什麼是 BOM 呢?BOM ( Browser Object Model,瀏覽器物件模型 ),是瀏覽器所有功能的核心,主要處理瀏覽器視窗和框架,不過通常瀏覽器特定的 JavaScript 擴充套件都被看做 BOM 的一部份,包括:彈出新的瀏覽器視窗、移動與關閉及調整瀏覽器視窗、提供 web 瀏覽器詳細資訊的定位物件、對 cookie 的支援.....等等。

window 物件其實就是 BOM 的核心,window 物件提供的屬性主要有 documentlocationnavigatorscreenhistory 以及 frames

在瀏覽器裡的 window 物件扮演著兩種角色:

  • ECMAScript 標準裡的「全域物件」 (Global Object)

    凡是在「全域作用範圍內」宣告的變數、物件、函式等等,都會自動變成「全域物件」,

    這樣的變數便稱它為「全域變數」,可以使用 window.xxx 的方式抓取。

  • JavaScript 用來與瀏覽器溝通的窗口

    指的是 alert()blur()close()open() 等等我們所看到的 window 方法,就是窗口。

全域變數範例,var a = 5 這個全域變數,可以透過 window 抓取

var a = 5;
console.log( window.a );    // 5

在「全域作用範圍」宣告全域變數無法使用 delete 來移除,必須直接透過 window

// 無法使用 delete 來移除
var dog = 8;
console.log( window.dog ); // 8

delete window.dog; // false
console.log(window.dog); // 8

// 直接透過 window 來移除
window.dog = 8;
console.log(window.dog); // 8

delete window.dog; // true
console.log(window.dog); // undefined

由於 BOM 的 window 包含了 documentwindow 物件的屬性和方法是可以直接使用及運作的,因此可以直接使用 window 物件的 document 屬性,因為 document 物件又是 DOM 的根節點。可以說,BOM 包含了 DOM(物件),瀏覽器提供訪問的是 BOM 物件,從 BOM 物件在訪問到 DOM 物件,因此 JavaScript 可以操作瀏覽器以及讀取瀏覽器的文件。


DOM

接著聊聊 DOM,DOM ( Document Object Model,文件物件模型 ),是一個以樹狀結構來表示 HTML 文件的模型,而組合起來的樹狀圖,我們稱之為「DOM Tree」。這邊這一行看起來可能還沒有辦法馬上理解,所以這裡直接範例:

<html xmlns="" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<title>DOM</title>
	</head>
	<body>
		<h2><a href="http://www.baidu.com">javascript DOM</a></h2>
		<p>對HTML元素進行操作,可新增、改變或移除css樣式等</p>
		<ul>
			<li>Javascript</li>
			<li>DOM</li>
			<li>CSS</li>
		</ul>
	</body>
</html>

HTML 可以說是由節點構成的集合,我們將 HTML 程式碼分解為 DOM 節點層次圖:

  • 元素節點:上面範例中 、、 等都是元素節點,也是標籤。
  • 文字節點:向使用者展示的內容,如 中的 JavaScript、DOM、CSS 等文字。
  • 屬性節點:元素屬性,如 標籤的連結屬性 href="http://xxxx.xxxx.com"。

由上面的說明可以知道,一個節點就是一個標籤,JavaScript 就可以藉由 DOM API 去存取並改變 HTML 架構及互動方法,底下歸納 BOM 與 DOM 的分別:

  • BOM / JavaScript 與瀏覽器溝通的窗口,不涉及網頁內容。
  • DOM / JavaScript 用來控制網頁的節點與內容的標準。

取得 DOM 原型物件

參考開發者,透過 JavaScript 取得 DOM API 的寫法:

// 根據傳入的值,找到 DOM 中 id 為 'xxx' 的元素。
document.getElementById('xxx');

// 針對給定的 tag 名稱,回傳所有符合條件的 NodeList 物件
document.getElementsByTagName('xxx');

// 針對給定的 class 名稱,回傳所有符合條件的 NodeList 物件。
document.getElementsByClassName('xxx');

// 針對給定的 Selector 條件,回傳第一個 或 所有符合條件的 NodeList。
document.querySelector('xxx');
document.querySelectorAll('xxx');

參考資料:

重新認識 JavaScript: Day 11 前端工程師的主戰場:瀏覽器裡的 JavaScript
JavaScript入門系列:BOM和DOM筆記
javascript學習筆記(三)BOM和DOM詳解


上一篇
JavaScript Day 19. by value ( 傳值 ) 與 by reference ( 傳址 )
下一篇
JavaScript Day 21. 陳述式 & 表達式
系列文
我的JavaScript日常31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言